<template>
	<el-row class="container">
		<z-header :sys-name="sysName" :user-avatar-url="sysUserAvatar"/>
		<div class="main">
			<el-col :span="24">
				<el-col :span="5" class="siderbar-container">
                    <siderbar/>
                </el-col>
                <el-col :span="19">
    				<section class="content-container">
    					<div class="grid-content bg-purple-light">
    						<el-col :span="24" class="breadcrumb-container">
    							<strong class="title">{{$route.name}}</strong>
    							<el-breadcrumb separator="/" class="breadcrumb-inner">
    								<el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
    									{{ item.name }}
    								</el-breadcrumb-item>
    							</el-breadcrumb>
    						</el-col>
    						<el-col :span="24" class="content-wrapper">
    							<transition name="fade" mode="out-in">
    								<router-view></router-view>
    							</transition>
    						</el-col>
    					</div>
    				</section>
                </el-col>
			</el-col>	
		</div>
	</el-row>
</template>

<script>
	import ZHeader from './ZHeader.vue';
    import Siderbar from './Siderbar.vue';
	export default {
		components: {
			ZHeader,
            Siderbar
		},
		data() {
			return {
				sysName:'VUEADMIN',
				collapsed:false,
				sysUserName: '',
				sysUserAvatar: '',
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				}
			}
		},
		methods: {
			onSubmit() {
				console.log('submit!');
			},
			//折叠导航栏
			collapse(){
				this.collapsed=!this.collapsed;
			},
			// showMenu(i,status){
			// 	this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
			// }
		},
		mounted() {
			var user = sessionStorage.getItem('user');
			if (user) {
				user = JSON.parse(user);
				this.sysUserName = user.name || '';
				this.sysUserAvatar = user.avatar || '';
			}

		}
	}

</script>

<style scoped lang="scss">
	@import '~scss_vars';

	.container {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;
        .el-col {
            height:100%;
        }
		.main {
			// background: #324057;
			overflow: hidden;
            margin: 42px auto;
			width: 1280px;
            height: 1280px;
            border: 1px solid #cccccc;
            border-radius: 8px;
            box-shadow: 0 0 13px #dadada;

			.menu-collapsed{
				flex:0 0 60px;
				width: 60px;
			}
			.menu-expanded{
				flex:0 0 230px;
				width: 100%;
			}
			.content-container {
				// background: #f1f2f7;
				flex:1;
				// position: absolute;
				// right: 0px;
				// top: 0px;
				// bottom: 0px;
				// left: 230px;
				padding: 20px;
				.breadcrumb-container {
					//margin-bottom: 15px;
					.title {
						width: 200px;
						float: left;
						color: #475669;
					}
					.breadcrumb-inner {
						float: right;
					}
				}
				.content-wrapper {
					background-color: #fff;
					box-sizing: border-box;
				}
			}
		}
	}
</style>